<template>
	<div>
        <el-form :inline="true"   class="search-form" size="medium" label-width="100px">
			<el-form-item label="市场名称：">
				<el-select v-model="searchForm.marketId"  placeholder="请选择市场">
					<el-option v-for="(item,index) in store.marketOptions" :key="item.marketId" :label="item.marketName" :value="item.marketId"></el-option>
				</el-select>
			</el-form-item>
            <el-form-item label="公告状态:">
                <el-select v-model="searchForm.noticeState" placeholder="状态" style="width:200px;">
                    <el-option
                        v-for="item in  noticeStateList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                       >
                    </el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="是否置顶:">
                <el-select v-model="searchForm.noticeTop" placeholder="状态" style="width:200px;">
                    <el-option
                        v-for="item in  noticeTopList"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                       >
                    </el-option>
                </el-select>
            </el-form-item>
			<el-form-item >
				<el-button type="primary" icon="el-icon-search" @click="searchData">查询</el-button>
                <el-button icon="el-icon-refresh" @click="clearSearch">重置</el-button>
			</el-form-item>
		</el-form>
		<el-table  :data="noticeList" border v-loading="loading">
			<el-table-column prop="notice.noticeTitle" label="标题" ></el-table-column>
		    <el-table-column prop="notice.noticeContent" label="内容" min-width="180"></el-table-column>
            <el-table-column label="有效日期" width="240" align="center">
               	<template   slot-scope="scope">
					<span>{{scope.row.notice.noticeStartTime | filterDateForDay}}</span> 至 <span>{{scope.row.notice.noticeEndTime | filterDateForDay}}</span>
				</template>
			</el-table-column>
<!--             <el-table-column label="截止日期">
               	<template   slot-scope="scope">
					<span>{{scope.row.notice.noticeEndTime | filterDateForDay}}</span>
				</template>
			</el-table-column> -->
            <el-table-column label="是否置顶" >
                <template  slot-scope="scope">
                    <span>{{scope.row.notice.noticeTop | filterNoticeTop }}</span>
                </template>
			</el-table-column>
             <el-table-column label="状态">
               	<template  slot-scope="scope">
                    <span>{{scope.row.notice.noticeState | filterNoticeState}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="250">
				<template slot-scope="scope">
                    <el-button @click="handleEdit(scope.row.noticeId)"  size="small"  type="primary">编辑</el-button>
                     <el-button @click="handleFreeze(scope.row.noticeId,scope.row.notice.noticeState)"  size="small">
                        <span v-if="scope.row.notice.noticeState == 1">撤销</span><span v-else>恢复</span>
                    </el-button>
                    <el-button @click="setTop(scope.row.noticeId,1)" v-if="scope.row.notice.noticeTop == 0" size="small">置顶</el-button>
                    <el-button @click="setTop(scope.row.noticeId,0)" v-if="scope.row.notice.noticeTop == 1" size="small">取消置顶</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="footer">
		<el-pagination
		  background
		  @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
      :current-page="searchForm.pageIndex"
      :page-sizes="[5, 10, 20, 40]"
	      :page-size="store.params.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="pageTotal">
	    </el-pagination>
	    </div>
	</div>
</template>

<script>
  export default {
    name:'noticeList',
    data() {
      return {
        loading: true,
        noticeList:[],
        pageTotal:0,
        noticeState: 0,
        store:{
            marketOptions:[],
            params:{
                pageSize:5,
                pageIndex:1,
                marketId:"1",
            },
        },
        searchForm: {
            pageSize:5,
            pageIndex:1,
            marketId:this.$marketId,
            noticeState: '',
            noticeTop: ''
        },
        noticeStateList:[
            { value: 1,name: '有效'},
            { value: 0,name: '无效'}
        ],
        noticeTopList: [
            { value: 1,name: '是'},
            { value: 0,name: '否'}
        ]
       }
    },
    created(){
        this.$store.commit('getMarketOptions',this.store)
    },
    activated() {
        this.getData();
    },
    methods:{
        searchData(){
          this.searchForm.pageIndex = 1;
          this.getData()
        },
        getData(){
            this.loading = true;
    		this.$axios.get(this.$api.getNoticeMarketList,{params: this.searchForm})
    		.then((res)=>{
                this.noticeList = res.data.result;
    			this.loading = false;
    		})
    		this.$axios.get(this.$api.getNoticeListNum,{params: this.searchForm})
    		.then((res)=>{
    			this.pageTotal = res.data.result
            })
        },
        clearSearch(){
            this.searchForm = {
              pageSize:5,
              pageIndex:1,
              marketId:this.$marketId,
              noticeState: '',
              noticeTop: ''
            };
            this.getData();
        },

        setTop(noticeId,topState){
            this.$axios.get(this.$api.updateNotice,{params: {noticeId: noticeId, noticeTop: topState}})
    		.then((res)=>{
                this.$message({
                    message: res.data.msg,
                    type: 'success'
                });
            this.getData();
    		})
        },
      	handleSizeChange(val) {
            this.searchForm.pageSize = val;
            this.getData();
		},
		handleCurrentChange(val) {
            this.searchForm.pageIndex = val;
            this.getData();
        },
        handleEdit(noticeId) {
            this.$router.push("/notice/noticeForm/"+ noticeId)
        },
        handleFreeze(noticeId,state){
            if (noticeId == null || noticeId == '') {
                return false;
            }
            var message
            if (state == 1){
                message = '确定要撤销公告吗？'
                this.noticeState = 0
            }else{
                message = '确定要恢复公告吗？'
                this.noticeState = 1
            }
            this.$confirm(message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                 this.$axios.get(this.$api.updateNotice,{params: {noticeState: this.noticeState, noticeId: noticeId }})
                .then((res)=>{
                    this.$message({
                        message: res.data.msg,
                        type: 'success'
                    });
                   this.getData();
                  })
                });
        },
        handleRentInfo(){

        }
    },

  };
</script>
